<%@ include file="../layout/taglib.jsp" %>
<div class="content-top" ng-app="dnd" id="basket_detail">


		<div class="container section group">
			<div class="col span_2_of_contact">
				<div class="" ng-controller="basketCtrl">
					<div> <t:message code="basket_txt1"/>
					      <input type="text" id="nbr" value="${nbpr}" disabled size="1"/>
						 <t:message code="product_"/> 
					</div>
                   
                   <c:if test="${nbpr > 0}">
                        <table class="table table-striped" id="table_basket">

							<thead>
								<tr>
									<th><t:message code="product"/></th>
									<th><t:message code="price"/> (VND)</th>
									<th><t:message code="quantity"/></th>
									<th></th>
								</tr>
							</thead>
							<tbody>
							   <c:forEach items="${lstprodnew}" var="ht">
								<tr >
									<td> <c:out value="${ht.key.titleProd}" /></td>
									<td> <c:out value="${ht.key.price}" /></td>
									<td>
									  
										  <select name="qty" class="target" id="${ht.key.idCourse}">
											 <option value="1" <c:if test="${ht.value eq 1}">selected="selected"</c:if>>1</option>  
						                  	 <option value="2" <c:if test="${ht.value eq 2}">selected="selected"</c:if>>2</option>
						                  	 <option value="3" <c:if test="${ht.value eq 3}">selected="selected"</c:if>>3</option>
						                  	 <option value="4" <c:if test="${ht.value eq 4}">selected="selected"</c:if>>4</option>
						                  	 <option value="5" <c:if test="${ht.value eq 5}">selected="selected"</c:if>>5</option>
						                  	 <option value="6" <c:if test="${ht.value eq 6}">selected="selected"</c:if>>6</option>
						                  	 <option value="7" <c:if test="${ht.value eq 7}">selected="selected"</c:if>>7</option>
						                 </select> 
									
									</td>
									<td><a href="#" class="basket_line" id="${ht.key.idCourse}"> <span
											class="glyphicon glyphicon-remove-sign"></span>
										</a>	
											</td>
								</tr>
                                </c:forEach> 
							</tbody>
						</table>
						
						<div class="form-group">
							<label class="col-sm-9 control-label"  id="label"><t:message code="total"/> :  <input type="text" id="total" value="${total}" disabled size="7"/> VND</label>
							<div class="col-sm-3">
								   
								    <form  action="saveBasket" method="POST" name="saveBasket">
							                <p class="form-control-static" style="padding-top: 0px;">
											   <input type="submit" class="btn btn-success" value="<t:message code="buy_pro"/>"/>
											</p>
									</form>
							</div>
						</div>
							
                      </c:if>
				</div>
			</div>
			<div class="col span_1_of_contact">
				<div class="company_address">
					<h3>Company Information :</h3>
					<p>500 Lorem Ipsum Dolor Sit,</p>
					<p>22-56-2-9 Sit Amet, Lorem,</p>
					<p>Phone:(00) 222 666 444</p>
					<p>Fax: (000) 000 00 00 0</p>
					<p>
						Email: <span>info[at]mycompany.com</span>
					</p>
					<p>
						Follow on: <span>Facebook</span>, <span>Twitter</span>
					</p>
				</div>
			</div>
			<div class="clear"></div>
		</div>
	
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript"  src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	 
    $("#table_basket").on('click','.basket_line',function(){
    	
        $(this).parent().parent().remove();
        var id_res= this.id;
    	
    	  $.ajax({
			    type:'GET',
			    data: "idProd=" + id_res,
                url : '<%=request.getContextPath()%>/lstcourses/del_prod_in_basket',
		        success : function(data){
		        	$('#total').val(data.result);
		        	$('#nbr').val(data.status);
		        }
            });
    });
    
    $( ".target" ).change(function() {
    	var id_res= this.id;
    	var qty = this.value;
    	$.ajax({
			    type:'GET',
			    data:'idProd=' + id_res + '&qty=' + qty,
                url : '<%=request.getContextPath()%>/lstcourses/mod_prod_in_basket',
		        success : function(data){
		        	 $('#total').val(data.result);
		        }
         });
    });
    
});
</script>